import React, { Component } from 'react';
import { Route,Routes } from 'react-router-dom'
import About from './components/About';
import Home from './components/Home';
import MyNavaLink from './components/MyNavaLink';



class App extends Component {
    render() {
        return (   
            <div>
               
            <div className="row">
              <div className="col-xs-offset-2 col-xs-8">
                <div className="page-header"><h2>React Router Demo</h2></div>
              </div>
            </div>
            <div className="row">
              <div className="col-xs-2 col-xs-offset-2">
                <div className="list-group">
                  <MyNavaLink to="/home/a/b">Home</MyNavaLink>
                  <MyNavaLink to="/about">About</MyNavaLink>
                </div>
              </div>
              <div className="col-xs-6">
                <div className="panel">
                  <div className="panel-body">
                  
                  {/* 默认是精准匹配，低版本默认是模糊匹配 */}
                     <Routes>
                        <Route
                            path="*"
                            element={
                              <main style={{ padding: "1rem" }}>
                                <p>There's nothing here!</p>
                              </main>
                            }
                          />   
                        <Route  path="/about" element={<About/>}/>
                        <Route path="/home" element={<Home/>}/>           
                    </Routes>
                   
                  </div>
                </div>
              </div>
            </div>
           
          </div>
        );
    }
}

export default App;